<template>
	<view class="detail" :data="data" :change:data="subjectJs.dataChange">
		<comment ref="comment" router="/pages/community/subject-view" :id="id" :pageReady="pageReady" :data="params" v-if="!isDelete">
			<view class="container">
				<view class="container__head">
					<view class="container__head--left" @click="goHomePage">
						<avator circle :avator="data.avator" :name="data.CreateUser"></avator>
					</view>
					<view class="container__head--center">
						<view class="container__head--center-name">
							<text @click="goHomePage">{{data.CreateUser}}</text>
						</view>
						<view class="container__head--center-dept">
							<text @click="goHomePage">{{userDept.deptname}}</text>
						</view>
					</view>
					<view class="container__head--right" v-if="data.IsSelf == '0'">
						<view class="container__head--right-unfollow" v-if="data.MyFavoritesCount == '0'" @click="addFavorite">+ 收藏帖子</view>
						<view class="container__head--right-follow" v-else @click="delFavorite">已收藏</view>
					</view>
				</view>
				<view class="container__body">
					<view class="container__body--title">
						<text class="container__body--title-block">{{data.BlockName}}</text>
						<text class="container__body--title-text">{{data.SubjectTitle}}</text>
					</view>
					<view class="container__body--time" v-if="data.isSameYear">
						<view class="container__body--time__left">
							<text>文章发表：</text>
							<text>{{data.createTime}}</text>
						</view>
						<view class="container__body--time__line" v-show="data.CreateTime != data.UpdateTime"></view>
						<view class="container__body--time__right" v-show="data.CreateTime != data.UpdateTime">
							<text>最后编辑：</text>
							<text>{{data.updateTime}}</text>
						</view>
					</view>
					<view class="container__body--time" v-else>
						<view class="container__body--time__left">
							<text>文章发表：</text>
							<text>{{data.createTime}}</text>
						</view>
					</view>
					<view class="container__body--gather" v-if="seriesInfo.SeriesId" @click="goPageSeries">
						<view class="container__body--gather-box">
							<view class="container__body--gather-box-text1">来自合集</view>
							<view class="container__body--gather-box-text2">{{seriesInfo.SeriesTitle}}</view>
							<u-icon name="arrow-right" size="16"></u-icon>
						</view>
					</view>
					<view class="container__body--content container__body--content-text" v-html="data.SubjectContent"> 
						<!-- <rich-text class="container__body--content-text" :nodes="data.SubjectContent" :preview="true" @itemclick="richTextClick"></rich-text> -->
					</view>
					
					<view class="form" v-for="item in forms" :key="item.Id" @click="goForm(item,1)">
						<view class="form__body">
							<view class="form__body--cover">
								<image :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="form__body--content">
								<view class="form__body--content-title ellipsis">{{item.FormTitle}}</view>
								<view class="form__body--tag">
									<view class="" style="border: 1rpx solid #52c41a;padding: 0 8rpx;border-radius: 10rpx;" v-if="item.DataCount*1 > 1">
										<text style="color: #52c41a;">已{{item.DataCount}}人填写</text>
									</view>
									<view class="" style="border: 1rpx solid #52c41a;padding: 0 8rpx;border-radius: 10rpx;" v-else-if="item.DataCount == 1">
										<text style="color: #52c41a;">已填写</text>
									</view>
									<view class="" style="border: 1rpx solid #f5222d;padding: 0 8rpx;border-radius: 10rpx;" v-else-if="item.DataCount == 0">
										<text style="color: #f5222d;">未填写</text>
									</view>
								</view>
								<!-- <view class="form__body--content-des multiple-ellipsis">{{item.FormDesc}}</view> -->
								<view class="" style="display: flex;font-size: 20rpx;">
									<view class="" v-if="item.LastUser">
										<text>最后填写：</text>
										<text style="margin-right: 20rpx;">{{item.LastUser}}</text>
									</view>
								</view>
							</view>
							<view class="form__body--right">
								<view class="form__body--right-btn" @click.stop="goForm(item,2)">填表</view>
							</view>
						</view>
					</view>
					
					<view class="container__body--tag" v-if="data.tags">
						<view class="container__body--tag-item" v-for="item in data.tags" :key="item">{{item}}</view>
					</view>
					<view class="container__body--info">
						<view class="container__body--info-view">
							<image src="@/static/theme/default/community/list-view.png" mode=""></image>
							<text>浏览数：</text>
							<text>{{data.ViewCount}}</text>
						</view>
					</view>
				</view>
				<view class="container__bottom" v-if="seriesInfo.SeriesId">
					<view :class="['container__bottom--left',seriesInfo.PreSubjectId == '' ? 'disabled-btn' : '' ]" @click="prevSubject">上一篇</view>
					<view class="container__bottom--center" @click="goPageSeries">
						<view class="container__bottom--center-des">来自合集</view>
						<view class="container__bottom--center-text">{{seriesInfo.SeriesTitle}}</view>
						<view class="container__bottom--center-page">({{seriesInfo.SeriesSorting}}/{{seriesInfo.MaxSorting}}篇)</view>
					</view>
					<view :class="['container__bottom--right',seriesInfo.NextSubjectId == '' ? 'disabled-btn' : '' ]" @click="nextSubject">下一篇</view>
				</view>
			</view>
		</comment>
		
		<no-data text="内容已删除" v-else></no-data>
		
		<u-popup round="10" :show="setPopVisible" @close="setPopVisible = false" @open="setPopVisible = true">
			<view class="set-pop">
				<view class="set-pop-box">
					<view class="set-pop-box__item" @click="setTop" v-if="isMaster == '1' && data.IsTop == '1'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/community/cancel-top.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">取消置顶</view>
					</view>
					<view class="set-pop-box__item" @click="setTop" v-if="isMaster == '1' && data.IsTop == '0'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/community/set-top.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">置顶</view>
					</view>
					<view class="set-pop-box__item" @click="goPageEditAsModule" v-if="data.IsSelf == '1'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/home/comment/copy.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">作为模板创建</view>
					</view>
					<view class="set-pop-box__item" @click="goPageEdit" v-if="data.IsSelf == '1'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/home/xiugai.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">编辑</view>
					</view>
					<view class="set-pop-box__item" @click="del" v-if="data.IsSelf == '1' || isMaster == '1'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/home/comment/shanchu.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">删除</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="set-pop-box__item" @click="share">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/community/share.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">分享</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="set-pop-cancel" @click="setPopVisible = false">取消</view>
			</view>
		</u-popup>
		
		<u-popup :round="10" mode="center" :show="linkVisible" @close="linkVisible = false" @open="linkVisible = true">
			<view class="link">
				<view class="link__item" @click="copyLink">复制链接</view>
				<view class="link__item" @click="goLink">跳转到链接</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Comment from '@/pages/home/child/week-report-view/components/comment.vue'
	import Avator from '@/components/custom/avator/avator.vue'
	import moment from 'moment';
	import emoji_default from '../../static/js/message/emoji_data.js';
	import emoji_jxp from '@/static/js/jxp.js';
	import { formatImg,timestampFormat,entitiestoUtf16 } from '@/common/custom_util.js';
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			Comment,
			Avator,
			NoData
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				static_img: _data.data('static_img'),
				pxid: _data.localData('userid'),
				isMaster: _data.localData('isMaster'),//是否为管理员，'1'：是
				emojiList: emoji_default.emoji_list,
				emojiDic: emoji_default.emoji_dic,
				jxpList: emoji_jxp.jxp_data,
				jxpDic: emoji_jxp.jxp_dic,
				businessId: '',
				id: '',
				pageReady: false,
				data: {},
				userDept: {},
				params: {},
				seriesInfo: {},//合集信息
				setPopVisible: false,
				linkVisible: false,
				link: '',//当前链接
				isDelete: false,//帖子是否删除
				isScroll: 0,
				forms: [],//表单数据
			}
		},
		onLoad(options) {
			let businessId = options.businessId;
			this.isScroll = options.isScroll;
			this.id = options.id;
			this.init(businessId);
			uni.$on('edit-subject',() => {
				this.$nextTick(() => {
					this.init(businessId)
				})
			})
			uni.$on('goCommentHomePage',(v) => {
				uni.navigateTo({
					url: './homepage?data=' + JSON.stringify(v)
				})
			})
		},
		onShow() {
			this.getSmartFormListInBusiness();
		},
		onUnload() {
			uni.$off('edit-subject')
			uni.$off('goCommentHomePage');
		},
		onReady() {
			this.pageReady = true;
			if(this.isScroll == 1) {
				uni.$emit('scrollToComment');
			}
		},
		onNavigationBarButtonTap() {
			if(this.isDelete) return
			this.setPopVisible = true;
		},
		methods: {
			init(v1) {
				this.businessId = v1;
				this.getSubjectInfoById().then(() => {
					this.getSubjectAroundInfoInSeries();
					this.getSmartFormListInBusiness();
				})
			},
			/**
			 * 根据Id获取帖子详情
			 */
			getSubjectInfoById() {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getSubjectInfoById',
						apiparam: {
							id: this.businessId,
							obsusername: this.obsusername,
							obspxid: this.pxid
						},
						success(res) {
							if(!res.length) {
								that.isDelete = true;
								return
							}
							that.getUserDeptName(res[0].CreateUser,res[0].CreatePxid);
							res[0].SubjectTitle = entitiestoUtf16(res[0].SubjectTitle)
							res[0].CoverContent = entitiestoUtf16(res[0].CoverContent)
							res[0].avator = that.static_avator + "/static/photo/user/" + res[0].CreatePxid + "/70.jpg";
							res[0].createTime = timestampFormat(res[0].CreateTime);
							res[0].updateTime = timestampFormat(res[0].UpdateTime);
							res[0].isSameYear = moment(res[0].CreateTime).format('YYYY') == moment().format('YYYY');
							let content = entitiestoUtf16(res[0].SubjectContent);
							content = content.replace(/%22/g,'"');
							res[0].SubjectContent = that.replaceEmoji(content);
							res[0].tags = res[0].TagNames ? res[0].TagNames.split('|') : '';
							let images = res[0].SubjectImages ? res[0].SubjectImages.split('|') : [];
							let temp = [];
							images.forEach(item => {
								let image = item.split(',');
								temp.push(formatImg(image[0],false))
							})
							res[0].images = temp;
							that.params = {
								topicId: res[0].TopicId,
								businessId: res[0].Id,
								owner: res[0].CreateUser,
								ownerPxid: res[0].CreatePxid,
							};
							that.data = res[0];
							resolve()
						}
					})
				})
			},
			/**
			 * 获取帖子在合集中的信息（序号，总数，上一篇、下一篇）
			 */
			getSubjectAroundInfoInSeries() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectAroundInfoInSeries',
					apiparam: {
						subjectid: this.data.Id
					},
					success(res) {
						if(!res.length) return
						res[0].MaxSorting = res[0].MaxSorting*1 > 99 ? '99+' : res[0].MaxSorting;
						that.seriesInfo = res[0];
					}
				})
			},
			/**
			 * 获取部门等信息
			 */
			getUserDeptName(v1,v2) {
				let that = this;
				_custom.getDataJava({
					apiname: 'getUserDeptName',
					apiparam: {
						username: v1,
						userpxid: v2
					},
					success(res) {
						if(!res.length) return
						that.userDept = res[0];
					}
				})
			},
			/**
			 * 添加收藏
			 */
			addSubjectFavorites() {
				let that = this;
				_custom.getDataJava({
					apiname: 'addSubjectFavorites',
					code: 3,
					apiparam: {
						createuser: this.obsusername,
						createpxid: this.pxid,
						seriesid: '',//合集Id
						subjectid: this.data.Id,//帖子Id
					},
					success(res) {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
						that.data.MyFavoritesCount = '1'
					},
					fail() {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 取消收藏
			 */
			flagDelSubjectFavorites() {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelSubjectFavorites',
					code: 2,
					apiparam: {
						createuser: this.obsusername,
						createpxid: this.pxid,
						seriesid: '',//合集Id
						subjectid: this.data.Id,//帖子Id
					},
					success(res) {
						uni.showToast({
							title: '取消收藏成功',
							icon: 'none'
						})
						that.data.MyFavoritesCount = '0'
					},
					fail() {
						uni.showToast({
							title: '取消收藏失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 删除帖子
			 */
			flagDelSubjectById(v) {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'flagDelSubjectById',
						code: 2,
						apiparam: {
							obsusername: this.obsusername,
							obspxid: this.pxid,
							subjectid: v,
						},
						success(res) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							},300)
						},
						fail() {
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						},
						complete() {
							resolve()
						}
					})
				})
			},
			/**
			 * 修改帖子置顶状态
			 */
			updateSubjectTopState(v) {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'updateSubjectTopState',
						code: 2,
						apiparam: {
							istop: this.data.IsTop == '1' ? '0' : '1',
							subjectid: v,
						},
						success(res) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
							that.getSubjectInfoById();
						},
						fail() {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							})
						},
						complete() {
							resolve()
						}
					})
				})
			},
			/**
			 * 获取业务关联的表单填写情况列表
			 */
			getSmartFormListInBusiness() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSmartFormListInBusiness', 
					apiparam: {
						formids: this.data.FormIds,
						businesscode: 'Subject',
						businessid: this.data.Id,
					},
					success(res) {
						if(!res.length) return
						res.forEach(item => {
							item.LastTime ? item.lastTime = timestampFormat(item.LastTime) : '';
							item.cover = that.static_img + '/' + item.CoverImage;
							try {
								let json = item.FormJson.replace(/%22/g,'"');
								item.FormJson = JSON.parse(json);
							} catch{}
						})
						that.forms = res;
						console.log(res)
					}
				})
			},
			addFavorite() {
				this.addSubjectFavorites();
			},
			delFavorite() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认要取消收藏吗？',
					success(res) {
						if(res.confirm) {
							that.flagDelSubjectFavorites();
						}
					}
				})
			},
			/**
			 * 上一篇
			 */
			prevSubject() {
				if(this.seriesInfo.PreSubjectId) {
					uni.redirectTo({
						url: './subject-view?businessId=' + this.seriesInfo.PreSubjectId
					})
				}
			},
			/**
			 * 下一篇
			 */
			nextSubject() {
				if(this.seriesInfo.NextSubjectId) {
					uni.redirectTo({
						url: './subject-view?businessId=' + this.seriesInfo.NextSubjectId
					})
				}
			},
			/**
			 * 跳转到合集页
			 */
			goPageSeries() {
				uni.navigateTo({
					url: './series-list?seriesid=' + this.seriesInfo.SeriesId
				})
			},
			/**
			 * 置顶或取消置顶
			 */
			setTop() {
				let that = this;
				this.setPopVisible = false;
				if(this.data.IsTop == '1') {
					uni.showModal({
						title: '提示',
						content: '确认要取消置顶吗？',
						success(res) {
							if(res.confirm) {
								that.updateSubjectTopState(that.data.Id);
							}
						}
					})
				} else {
					that.updateSubjectTopState(that.data.Id);
				}
			},
			goPageEdit() {
				this.setPopVisible = false;
				uni.navigateTo({
					url: './edit?type=edit&id=' + this.data.Id
				})
			},
			goPageEditAsModule() {
				this.setPopVisible = false;
				uni.navigateTo({
					url: './edit?type=add-as-module&id=' + this.data.Id
				})
			},
			del() {
				let that = this;
				this.setPopVisible = false;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(res) {
						if(res.confirm) {
							that.flagDelSubjectById(that.data.Id);
						}
					}
				})
			},
			share() {
				let url = "http://221.226.178.122:1895/#/link?route=1&id=" +  this.businessId
				console.log(url)
				let image = '';
				if(this.data.DefaultImage) {
					image = this.data.DefaultImage.replace('.','_minPic.');
					image = formatImg(image,false)
				}
				this.setPopVisible = false;
				uni.share({
					provider: "weixin",//微信
					scene: "WXSceneSession",//分享到聊天界面
					type: 0,//图文
					href: url,//链接
					title: this.data.SubjectTitle,//标题
					summary: this.data.CoverContent,//分享内容的摘要
					imageUrl: image,//图片地址,小于20kb
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
						if(err.code == '-8') {
							uni.showToast({
								title: '微信未安装',
								icon: 'none'
							})
						}
					}
				});
			},
			/**
			 * 拦截点击事件（只支持 a、img标签）
			 * @param {Object} e
			 */
			richTextClick(e) {
				if(e.detail.node.name == 'img') {
					let image = e.detail.node.attrs.src;
					let pIndex = 0;
					this.data.images.forEach((item,index) => {
						if(item == image) pIndex = index
					})
					uni.previewImage({
						urls: this.data.images,
						current: pIndex
					})
				}
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(e) {
				e.stopPropagation();
				let data = {
					name: this.data.CreateUser,
					pxid: this.data.CreatePxid,
					avator: this.data.avator,
				}
				uni.navigateTo({
					url: './homepage?data=' + JSON.stringify(data)
				})
			},
			goForm(v,i) {
				if(v.DataCount == 0 && i == 1) {
					uni.showToast({
						title: '无人填写，无法查看',
						icon: "none"
					})
					return
				}
				let data = {
					...v,
					id: this.data.Id
				}
				uni.navigateTo({
					url: '/pages/home/child/smart-form-add/view-all?data=' + JSON.stringify(data) + '&type=' + i
				})
			},
			/**
			 * 点击链接
			 * @param {Object} v
			 */
			clickLink(v) {
				this.linkVisible = true;
				this.link = v;
			},
			/**
			 * 点击帖子链接
			 * @param {Object} v
			 */
			clickSubject(v) {
				uni.navigateTo({
					url: './subject-view?businessId=' + v,
					animationType: 'none'
				})
			},
			/**
			 * 点击艾特
			 */
			clickAt(v) {
				let data = {
					name: v.pname,
					pxid: v.pxid,
				}
				uni.navigateTo({
					url: './homepage?data=' + JSON.stringify(data)
				})
			},
			/**
			 * 跳转链接
			 */
			goLink() {
				uni.navigateTo({
					url: '/pages/push/web?url=' + this.link,
				});
				this.linkVisible = false;
			},
			/**
			 * 复制链接
			 */
			copyLink() {
				uni.setClipboardData({
					data: this.link,
					showToast: true
				});
				this.linkVisible = false;
			},
			/**
			 * 预览图片
			 * @param {Object} v
			 */
			preview(v) {
				uni.previewImage({
					urls: v.urls,
					current: v.index
				})
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					let key = item;
					let defaultValue = this.emojiDic[key] ? this.emojiDic[key].url : '';
					let jxpValue = this.jxpDic[key] ? this.jxpDic[key].url : '';
					let imgstr = '';
					if(defaultValue) {
						// #ifdef H5
						imgstr = '<img class="default pic emoji" style="width:22px;height:22px;" src="' + _data.data('static_url') + '/static/emoji/' + this.emojiDic[key].url + '">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + this.emojiDic[key].url);
						imgstr = '<img class="default pic emoji" style="width:22px;height:22px;" src="' + url + '">';
						// #endif
						return imgstr;
					} else if(jxpValue) {
						// #ifdef H5
						imgstr = '<img  class="jxp pic emoji" style="width:100px;height:100px;" src="' + _data.data('static_url') + '/static/emoji/jxp/' + this.jxpDic[key].url + '.gif">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + this.jxpDic[key].url + '.gif');
						imgstr = '<img  class="jxp pic emoji" style="width:100px;height:100px;" src="' + url + '">';
						// #endif
					}
					return imgstr;
				});
				replacedStr = replacedStr.replace(/(\r\n)|(\n)/g, '<br/>');
				return replacedStr;
			},
		}
	}
</script>

<script module="subjectJs" lang="renderjs">
	import { formatImg } from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			dataChange(newVal,oldVal,ownerInstance) {
				let imgEles = document.getElementsByClassName("edit-img");
				let urlEles = document.getElementsByClassName("url");
				let atEles = document.getElementsByClassName("at");
				let subjectEles = document.getElementsByClassName("subject");
				if(imgEles.length) {
					let imgs = [];
					
					for (let i = 0; i < imgEles.length; i++) {
						let item = imgEles[i];
						let src = formatImg(item.dataset.key);
						item.setAttribute('src',src);
						imgs.push(src);
					}
					
					for (let i = 0; i < imgEles.length; i++) {
						let item = imgEles[i];
						if(!imgs.length) continue
						item.addEventListener('click',(e) => {
							e.stopPropagation();
							ownerInstance.callMethod('preview',{
								urls: imgs,
								index: i
							})
						})
					}
				}
				if(urlEles.length) {
					for (let i = 0; i < urlEles.length; i++) {
						let item = urlEles[i];
						let url = item.dataset.url;
						item.addEventListener('click',(e) => {
							e.stopPropagation();
							ownerInstance.callMethod('clickLink',url)
						})
					}
				}
				if(subjectEles.length) {
					for (let i = 0; i < subjectEles.length; i++) {
						let item = subjectEles[i];
						let id = item.dataset.id;
						item.addEventListener('click',(e) => {
							e.stopPropagation();
							ownerInstance.callMethod('clickSubject',id)
						})
					}
				}
				if(atEles.length) {
					for (let i = 0; i < atEles.length; i++) {
						let item = atEles[i];
						item.setAttribute('contenteditable',false);
						item.contenteditable = false;
						let user = JSON.parse(item.dataset.user);
						item.onclick = function(){
							ownerInstance.callMethod('clickAt',user)
						}
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		
		&__head {
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			
			&--left {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			
			&--center {
				flex: 1;
				height: 100%;
				
				&-dept {
					font-size: 25rpx;
					color: #aaa;
				}
			}
			
			&--right {
				display: flex;
				height: 100rpx;
				align-items: center;
				
				&-unfollow {
					font-size: 28rpx;
					text-align: center;
					border: 1rpx solid #2979ff;
					border-radius: 10rpx;
					color: #2979ff;
					padding: 3rpx 10rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				&-follow {
					font-size: 28rpx;
					text-align: center;
					border: 1rpx solid #aaa;
					border-radius: 10rpx;
					color: #aaa;
					padding: 3rpx 10rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		
		&__body {
			padding: 0 30rpx;
			box-sizing: border-box; 
			
			&--title {
				font-size: 55rpx;
				line-height: 80rpx; 
				
				&-block {
					display: inline-block;
					padding: 0 5rpx;
					background-color: #13c2c2;
					color: #fff;
					font-size: 25rpx;
					border-radius: 5rpx;
					margin-right: 20rpx;
					line-height: 40rpx;
				}
				
			}
			
			&--content {
				user-select: text;
				word-break: break-all;
				
				&-text {
					font-size: 37rpx;
					line-height: 70rpx;
				}
			}
			
			&--time {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				color: #aaa;
				margin: 20rpx 0;
				
				&__left {
					padding: 0 20rpx;
				}
				
				&__line {
					height: 30rpx;
					border-left: 1rpx solid #eee;
				}
				
				&__right {
					padding: 0 20rpx;
				}
			}
			
			&--gather {
				display: flex;
				margin-bottom: 20rpx;
				
				&-box {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					background-color: #eee;
					border-radius: 10rpx;
					font-size: 25rpx;
					
					&-text1 {
						color: #aaa;
					}
					
					&-text2 {
						margin: 0 10rpx;
						max-width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			
			&--tag {
				display: flex;
				
				&-item {
					padding: 15rpx;
					background-color: #eee;
					font-size: 26rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
					border-radius: 10rpx;
				}
			}
			
			&--info {
				margin-top: 20rpx;
				
				&-view {
					display: flex;
					align-items: center;
					font-size: 25rpx;
					color: #aaa;
					
					image {
						width: 40rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		&__bottom {
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			
			&--left,&--right {
				font-size: 25rpx;
				width: 120rpx;
				height: 80rpx;
				border: 1rpx solid #aaa;
				border-radius: 10rpx;
				line-height: 80rpx;
				text-align: center;
				box-sizing: border-box;
			}
			
			&--center {
				margin: 0 20rpx;
				width: calc(100% - 280rpx);
				height: 80rpx;
				border: 1rpx solid #aaa;
				border-radius: 10rpx;
				position: relative;
				text-align: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				
				&-des {
					position: absolute;
					top: -25rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #aaa;
					font-size: 25rpx;
					background-color: #fff;
					padding: 0 10rpx;
				}
				
				&-text {
					height: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 80rpx;
					font-size: 25rpx;
				}
				
				&-page {
					min-width: 100rpx;
					max-width: 140rpx;
					line-height: 80rpx;
					font-size: 25rpx;
				}
			}
		}
	}
	
	.disabled-btn {
		border-color: #aaa;
		color: #aaa;
	}
	
	.set-pop {
		
		&-box {
			display: flex;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			
			&__item {
				min-width: 100rpx;
				height: 140rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				&--icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #fafafa;
					display: flex;
					justify-content: center;
					align-items: center;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&--text {
					font-size: 27rpx;
					color: #333;
				}
			}
		}
		
		&-cancel {
			height: 100rpx;
			background-color: #fafafa;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	.link {
		width: 400rpx;
		background-color: #fff;
		
		&__item {
			height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 100rpx;
			color: #999;
		}
	}
	
	.form {
		background-color: #f0f0f0;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 20rpx 0;
		
		&__body {
			display: flex;
			height: 100%;
			
			&--cover {
				width: 150rpx;
				height: 150rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			
			&--content {
				margin-left: 20rpx;
				width: calc(100% - 150rpx - 120rpx);
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				font-size: 25rpx;
				
				&-title {
					font-size: 32rpx;
					width: 100%;
				}
				
				&-des {
					font-size: 27rpx;
					color: #aaa;
				}
				
				text {
					font-size: 25rpx;
				}
			}
			
			&--tag {
				display: flex;
			}
			
			&--right {
				width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				&-btn {
					color: #fff;
					width: 100%;
					height: 70rpx;
					border-radius: 35rpx;
					background-color: #1677ff;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}
		
		
	}
	
	.container__body--content /deep/ .edit-img {
		border-radius: 20rpx;
		max-width: 100% !important;
	}
</style>
